<template>
  <div class="admissions">
    <Headers :graphic="graphic" />
    <div class="banner">
      <div class="post">
        <div class="nav">
          <div class="red-color div-rig">硕士研究生</div>
          <div class="div-rig">博士研究生</div>
          <div class="">同等学力</div>
        </div>
        <div class="card">
          <div class="title">通知公告</div>
          <div class="title-bom"></div>
          <div class="min-title">通知公告标题通知公告标题通知公告标题</div>
          <div class="text">
            &emsp;&emsp;1958年3月15日，经毛泽东主席亲自决策，中国人民解放军军事科学院成立，叶剑英元帅任首任院长兼政治委员。
            2017年7月19日，习主席亲自为新调整组建的军事科学院授军旗、致训词。新的军事科学院以原军事科学院和军兵种、军委机关部分直属科研、
            编研机构
            为基础重新组建，现设有8个研究院、2个中心和1个研究生院。军事科学院现任院长为杨学军中将，政治委员为方向中…
            <span class="check">【查看全文】</span>
          </div>
          <div class="card-item">
            <div class="item">
              公告|研究生院赴天津大学商讨深化联合培养研究生工作
            </div>
            <div class="item">
              公告|研究生院赴天津大学商讨深化联合培养研究生工作
            </div>
            <div class="item">
              公告|研究生院赴天津大学商讨深化联合培养研究生工作
            </div>
            <div class="item">
              公告|研究生院赴天津大学商讨深化联合培养研究生工作
            </div>
          </div>
          <div class="item-more">更多内容>></div>
        </div>
      </div>
      <div class="brief">
        <div class="title">招生简章</div>
        <div class="title-bom"></div>
        <div class="more">更多</div>
        <div class="card">
          <div class="card-item" v-for="item in 4" :key="item">
            <div class="item-left">
              <div class="data">10.28</div>
              <div class="year">2021</div>
            </div>
            <div class="item-right">
              <div class="tit">2022年“申请-考核”制博士研究生招生公告</div>
              <div class="article">
                2022年，我院非军事学学科博士研究生继续实行“申请-考核”
                制招生，军事学学科采取普通招考方式招生
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="content">
        <div class="title">招生专业内容</div>
        <div class="title-bom"></div>
        <div class="more">更多</div>
        <div class="card">
          <div class="card-item" v-for="item in 4" :key="item">
            <div class="item-left">
              <img src="@/assets/imgs/poo.jpg" alt="">
            </div>
            <div class="item-right">
              <div class="tit">秦伯益院士畅谈读书与人生</div>
              <div class="article">
               军事科学院研究生院举办第405期“红山博学讲坛”，邀请原军事医学科学院院长、中国工程院院士秦伯益研究员
              </div>
              <div class="data">2021.10.28</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Bottom/>
  </div>
</template>

<script>
import Headers from '@/components/headers.vue'
import Bottom from '@/components/bottom.vue'
export default {
  name: 'admissions',
  components: {
    Headers,
    Bottom
  },
  data() {
    return {
      graphic: {
        title: '招生工作',
        imgherf: '@/assets/imgs/background2.png',
        text: '一张张录取通知书见证着广大学子努力拼搏的涔涔汗水跨越山海，共赴理想“研”途有你，未来可期！',
      },
    }
  },

  methods: {},
}
</script>

<style lang="less" scoped>
.title {
  font-weight: 700;
  color: #333333;
  font-size: 48px;
  margin-bottom: 15px;
}
.title-bom {
  width: 111px;
  height: 8px;
  background-color: #b21315;
  border-radius: 8px;
  margin-bottom: 40px;
}
.banner {
  .post {
    .nav {
      height: 150px;
      display: flex;
      justify-content: center;
      padding: 95px 0 0 0;
      div {
        width: 426px;
        height: 26px;
        text-align: center;
        font-weight: 500;
        color: #666666;
        font-size: 26px;
        line-height: 26px;
      }
      .red-color {
        color: #b21315;
      }
      .div-rig {
        border-right: 1px solid #666666;
      }
    }
    .card {
      padding: 100px 330px;
      background-color: #f4f4f4;
      .min-title {
        font-weight: 700;
        color: #333333;
        font-size: 24px;
        margin-bottom: 30px;
      }
      .text {
        font-weight: 500;
        color: #666666;
        font-size: 18px;
        line-height: 36px;
      }
      .check {
        font-weight: 700;
        color: #b21315;
        font-size: 18px;
      }
      .card-item {
        margin: 90px 0 0 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .item {
          padding: 34px 25px 0;
          width: 300px;
          height: 184px;
          background-color: #b21315;
          margin-bottom: 30px;
          font-weight: 700;
          color: #ffffff;
          font-size: 20px;
        }
      }
      .item-more {
        margin: 0 auto;
        width: 150px;
        height: 30px;
        border: 2px solid #b21315;
        text-align: center;
        color: #b21315;
        line-height: 30px;
        font-size: 16px;
        font-weight: 700;
      }
    }
  }
  .brief {
    padding: 95px 160px 150px;
    .more {
      font-weight: 700;
      color: #b21315;
      font-size: 18px;
      text-align: right;
      margin-bottom: 10px;
    }
    .card {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .card-item {
        display: flex;
        padding: 40px 88px 0 44px;
        width: 49%;
        margin-bottom: 15px;
        height: 200px;
        border-radius: 5px;
        box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
        .item-left {
          margin-right: 20px;
          text-align: center;
          width: 200px;
          height: 110px;
          background-color: rgba(#b21315, 0.3);
          border-radius: 5px;
          .data {
            font-weight: 700;
            color: #b21315;
            font-size: 42px;
            margin-top: 13px;
          }
          .year {
            color: #b21315;
            font-size: 28px;
          }
        }
        .item-right {
          width: 446px;
          .tit {
            font-weight: 700;
            color: #333333;
            font-size: 20px;
            margin-bottom: 15px;
          }
          .article {
            color: #666666;
            font-size: 16px;
          }
        }
      }
    }
  }
  .content {
    padding: 95px 170px 200px;
    background-color:#f4f4f4;
        .more {
      font-weight: 700;
      color: #b21315;
      font-size: 18px;
      text-align: right;
      margin-bottom: 10px;
    }
      .card {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .card-item {
        display: flex;
        width: 49%;
        margin-bottom: 15px;
        height: 200px;
        border-radius: 5px;
        box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
        .item-left {
          margin-right: 20px;
          text-align: center;
          width: 290px;
          height: 200px;
          background-color: rgba(#b21315, 0.3);
          border-radius: 5px;
        }
        .item-right {
          width: 446px;
          .tit {
            font-weight: 700;
            color: #333333;
            font-size: 20px;
            margin-bottom: 15px;
            margin-top: 40px;
          }
          .article {
            color: #666666;
            font-size: 16px;
            height: 70px;
          }
          .data{
            color: #666666;
            font-size: 16px;
          }
        }
      }
    }
  }
}
</style>
